---
order: 3
title: 离屏渲染纹理
type: 图形
group: 纹理
label: Graphics/Texture
---

离屏渲染纹理，顾名思义，该纹理可以通过离屏渲染得到。底层使用了 [FBO](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/framebufferTexture2D) 技术，将渲染操作不再输出到屏幕上，而是输出到纹理上，用户通过该纹理，可以用来实现后处理特效、折射、反射、动态环境贴图等一些艺术创作。

引擎提供了 [RenderTarget](/apis/core/#RenderTarget) 类来进行离屏渲染，并获取相应的离屏渲染纹理，目前引擎支持生成以下离屏渲染纹理：

| 类型 | 应用 |
| :-- | :-- |
| 颜色纹理（[Texture](/apis/core/#Texture)） | 可以传入单张颜色纹理、多张颜色纹理 （MRT）、颜色立方纹理 |
| 深度纹理（[Texture](/apis/core/#Texture)） | 可以传入深度纹理、深度立方纹理 |
| 纹理组合 | 颜色纹理 + 深度纹理、颜色立方体纹理 + 深度立方体纹理、多张颜色纹理 + 深度纹理 |

## 使用

这里举例使用脚本 `onBeginRender` 钩子，在每一帧渲染前，先将屏幕`物体A`渲染到`离屏纹理`上，然后将离屏纹理当作`物体B`的基础纹理，将物体 B 渲染到`屏幕`上。假设 `物体A` 的 layer 为 `Layer0`，`物体B` 的 layer 为 `Layer1`;

```ts
class switchRTScript extends Script {
    renderColorTexture = new Texture2D(engine, 1024, 1024);
    renderTarget = new RenderTarget(
      engine,
      1024,
      1024,
      this.renderColorTexture
    );

    constructor(entity: Entity) {
      super(entity);
	  // 将离屏纹理当作物体B的基础纹理
      materialB.baseTexture = this.renderColorTexture;
    }

    onBeginRender(camera: Camera) {
	  // 渲染物体A
      camera.renderTarget = this.renderTarget;
      camera.cullingMask = Layer.Layer0;
      camera.render();

	  // 还原 RT，接下来渲染物体B到屏幕。
      camera.renderTarget = null;
      camera.cullingMask = Layer.Layer1;
    }
  }

  cameraEntity.addComponent(switchRTScript);
```
